<template>
    <div class="zh-quality-indicator">
        <nav-header></nav-header>

        <div class="quality-banner">
            <div>一级指标</div>
            <div>二级指标</div>
            <div>指标定义</div>
        </div>

        <div class="quality-wrapper" v-loading="loading.status" :element-loading-text="loading.txt">
            <div v-for="(item, inx) in listData" :key="inx">
                <div class="first-title">
                    <span>{{item.title}}</span>
                    <span class="operate-btn">
                        <i class="el-icon-circle-plus-outline" @click="newIndex(inx)"></i>
                        <img 
                            src="./../../../../static/image/affairs/quality/up.png" 
                            :class="inx == 0 ? 'operate-hidden' : ''"
                            @click="moveUpConfirm('first', inx)">
                        <img 
                            src="./../../../../static/image/affairs/quality/down.png" 
                            :class="inx == listData.length -1 ? 'operate-hidden' : ''"
                            @click="moveDownConfirm('first', inx)">
                        <i class="el-icon-delete" @click="deleteConfirm('first', inx)" :class="listData.length <= 3 ? 'operate-hidden' : ''"></i>
                    </span>
                </div>
                <div class="second-title " v-for="(item2, inx2) in item.children" :key="inx2">
                    <span>{{item2.title}}</span>
                    <span :title="item2.content">{{item2.content}}</span>
                    <span class="operate-btn">
                        <i class="el-icon-circle-plus-outline operate-hidden"></i>
                        <img 
                            src="./../../../../static/image/affairs/quality/up.png" 
                            :class="inx2 == 0 ? 'operate-hidden' : ''"
                            @click="moveUpConfirm('second', inx, inx2)">
                        <img 
                            src="./../../../../static/image/affairs/quality/down.png" 
                            :class="inx2 == item.children.length -1 ? 'operate-hidden' : ''"
                            @click="moveDownConfirm('second', inx, inx2)">
                        <i class="el-icon-delete" @click="deleteConfirm('second', inx, inx2)"></i>
                    </span>
                </div>
            </div>

            <div class="add-first-title"><i class="el-icon-circle-plus-outline" @click="newIndex" v-if="listData.length < 20"></i></div>
            <div class="total-score">每个二级指标评分标准为1-10分，素质评价总分：<span>{{getScore}}分</span></div>
        </div>

        <el-dialog 
            title="添加一级指标" 
            :visible.sync="indexVisible" 
            class="add-index-manage" 
            width="400px" 
            :before-close="cancleIndex"
            :close-on-click-modal="false">
            <el-form :model="indexForm" :rules="rules" ref="indexForm" label-width="100px" class="demo-indexForm">
                <el-form-item label="一级指标：" prop="title">
                    <el-input v-model="indexForm.title" :maxLength="10"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="cancleIndex" plain>取消</el-button>
                <el-button type="primary" @click="submitIndex('indexForm')">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog 
            title="添加二级指标" 
            :visible.sync="index2Visible" 
            class="add-index-manage" 
            width="600px" 
            :before-close="cancleIndex"
            :close-on-click-modal="false">
            <el-form :model="index2Form" :rules="rules" ref="index2Form" label-width="100px" class="demo-indexForm">
                <el-form-item label="二级指标：" prop="title2">
                    <el-input v-model="index2Form.title2" :maxLength="10"></el-input>
                </el-form-item>
                <el-form-item label="指标定义：" prop="content">
                    <el-input type="textarea" :rows="3" placeholder="请输入指标定义" v-model="index2Form.content"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="cancleIndex" plain>取消</el-button>
                <el-button type="primary" @click="submitIndex2('index2Form')">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            indexVisible: false,
            index2Visible: false,
            activeIndex: 0,
            listData: [],
            loading:{
                status: false,
                txt: '获取数据...',
            },
            indexForm: {
                title: ''
            },
            index2Form: {
                title2: '',
                content: ''
            },
            rules: {
                title: [
                    { required: true, message: '请输入一级指标', trigger: 'blur' },
                ],
                title2: [
                    { required: true, message: '请输入二级指标', trigger: 'blur' },
                ],
                content: [
                     { required: true, message: '请输入指标定义', trigger: 'blur' },
                ]
            }
        }
    },
    created() {
        this.getList();
    },
    computed: {
        getScore() {
            let score = 0;

            this.listData.forEach(item1 => {
                item1.children.forEach(item2 => {
                    score += 10;
                })
            })

            return score;
        }
    },
    methods: {
        /**
         * 获取素质评价
         */
        getList() {
            this.loading.status = true;

            let success = (res => {
                this.loading.status = false;
                this.listData = deep_clone(res.data);
            });
            const params = {
                status: 1
            }

            this.$ajax.get('api/quality/quality_index', {params, func: {success: success}})
        },
        /**
         * 新增指标
         * @param {Number} inx 一级数组指标
         */
        newIndex(inx) {
            if (inx >= 0) {
                this.index2Visible = true;
                this.activeIndex = inx;
                this.index2Form.title2 = '';
                this.index2Form.content = '';
            } else {
                this.indexVisible = true;
                this.indexForm.title = '';
            }
        },
        /**
         * 提交一级指标
         */
        submitIndex(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading.status = true;
                    let quality_index = [];

                    this.listData.forEach((item, index) => {
                        let _children = [];

                        item.children.forEach(item2 => {
                            _children.push({
                                title: item2.title,
                                content: item2.content
                            })
                        })

                        quality_index.push({
                            title: item.title,
                            children: _children
                        })
                    })

                    quality_index.push({
                        title: this.indexForm.title,
                        children: []
                    })

                    let success = (res => {
                        this.loading.status = false;
                        this.indexVisible = false;
                        this.$message.success(res.msg);

                        this.getList();
                    });
                    const fail = (res => {
                        this.loading.status = false;
                        this.$message.error(res.msg);
                    })
                    const params = {
                        quality_index
                    }

                    this.$ajax.put('api/quality/quality_index', params, {func: {success: success, fail: fail}})
                } else {
                    return false;
                }
            });
        },
        /**
         * 提交二级指标
         */
        submitIndex2(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading.status = true;
                    let quality_index = [];

                    this.listData.forEach((item, index) => {
                        let _children = [];

                        item.children.forEach(item2 => {
                            _children.push({
                                title: item2.title,
                                content: item2.content
                            })
                        })

                        quality_index.push({
                            title: item.title,
                            children: _children
                        })
                    })

                    let _quality = quality_index[this.activeIndex].children;
                    _quality.push({
                        title: this.index2Form.title2,
                        content: this.index2Form.content
                    })

                    let success = (res => {
                        this.loading.status = false;
                        this.index2Visible = false;
                        this.$message.success(res.msg);

                        this.getList();
                    });
                    const fail = (res => {
                        this.loading.status = false;
                        this.$message.error(res.msg);
                    })
                    const params = {
                        quality_index
                    }

                    this.$ajax.put('api/quality/quality_index', params, {func: {success: success, fail: fail}})
                } else {
                    return false;
                }
            });
        },
        /**
         * 取消弹窗
         */
        cancleIndex() {
            this.indexVisible = false;
            this.index2Visible = false;
        },
        /**
         * 确认是否上移指标
         * @param {Number} flag 一级数组标识
         * @param {Number} inx1 一级数组下标
         * @param {Number} inx2 二级数组下标
         */
        moveUpConfirm(flag, inx1, inx2) {
            let title = flag === 'first' ? '是否上移该一级指标' : '是否上移该二级指标';
            let yes = (res => {
                if (flag === 'first') {
                    this.moveFirstUP(inx1);
                } else {
                    this.moveSecondUP(inx1, inx2);
                }
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: title});
        },
        /**
         * 上移一级指标
         * @param {Number} inx 一级数组下标
         */
        moveFirstUP(inx) {
            this.loading.status = true;
            let quality_index = [];

            this.listData.forEach((item, index) => {
                let _children = [];

                item.children.forEach(item2 => {
                    _children.push({
                        title: item2.title,
                        content: item2.content
                    })
                })

                quality_index.push({
                    title: item.title,
                    children: _children
                })
            })

            quality_index.splice(inx-1, 1, ...quality_index.splice(inx, 1, quality_index[inx-1]))

            let success = (res => {
                this.loading.status = false;
                this.$message.success(res.msg);

                this.getList();
            });
            const fail = (res => {
                this.loading.status = false;
                this.$message.error(res.msg);
            })
            const params = {
                quality_index
            }

            this.$ajax.put('api/quality/quality_index', params, {func: {success: success, fail: fail}})
        },
        /**
         * 上移二级指标
         * @param {Number} inx1 一级数组下标
         * @param {Number} inx2 二级数组下标
         */
        moveSecondUP(inx1, inx2) {
            this.loading.status = true;
            let quality_index = [];

            this.listData.forEach((item, index) => {
                let _children = [];

                item.children.forEach(item2 => {
                    _children.push({
                        title: item2.title,
                        content: item2.content
                    })
                })

                quality_index.push({
                    title: item.title,
                    children: _children
                })
            })

            let _quality = quality_index[inx1].children;
            _quality.splice(inx2-1, 1, ..._quality.splice(inx2, 1, _quality[inx2-1]));

            let success = (res => {
                this.loading.status = false;
                this.$message.success(res.msg);

                this.getList();
            });
            const fail = (res => {
                this.loading.status = false;
                this.$message.error(res.msg);
            })
            const params = {
                quality_index
            }

            this.$ajax.put('api/quality/quality_index', params, {func: {success: success, fail: fail}})
        },
        /**
         * 确认是否下移指标
         * @param {Number} flag 一级数组标识
         * @param {Number} inx1 一级数组下标
         * @param {Number} inx2 二级数组下标
         */
        moveDownConfirm(flag, inx1, inx2) {
            let title = flag === 'first' ? '是否下移该一级指标' : '是否下移该二级指标';
            let yes = (res => {
                if (flag === 'first') {
                    this.moveFirstDown(inx1);
                } else {
                    this.moveSecondDown(inx1, inx2);
                }
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: title});
        },
        /**
         * 下移一级指标
         * @param {Number} inx 一级数组下标
         */
        moveFirstDown(inx) {
            this.loading.status = true;
            let quality_index = [];

            this.listData.forEach((item, index) => {
                let _children = [];

                item.children.forEach(item2 => {
                    _children.push({
                        title: item2.title,
                        content: item2.content
                    })
                })

                quality_index.push({
                    title: item.title,
                    children: _children
                })
            })

            quality_index.splice(inx, 1, ...quality_index.splice(inx+1, 1, quality_index[inx]))

            let success = (res => {
                this.loading.status = false;
                this.$message.success(res.msg);

                this.getList();
            });
            const fail = (res => {
                this.loading.status = false;
                this.$message.error(res.msg);
            })
            const params = {
                quality_index
            }

            this.$ajax.put('api/quality/quality_index', params, {func: {success: success, fail: fail}})
        },
        /**
         * 下移二级指标
         * @param {Number} inx1 一级数组下标
         * @param {Number} inx2 二级数组下标
         */
        moveSecondDown(inx1, inx2) {
            this.loading.status = true;
            let quality_index = [];

            this.listData.forEach((item, index) => {
                let _children = [];

                item.children.forEach(item2 => {
                    _children.push({
                        title: item2.title,
                        content: item2.content
                    })
                })

                quality_index.push({
                    title: item.title,
                    children: _children
                })
            })

            let _quality = quality_index[inx1].children;
            _quality.splice(inx2, 1, ..._quality.splice(inx2+1, 1, _quality[inx2]));

            let success = (res => {
                this.loading.status = false;
                this.$message.success(res.msg);

                this.getList();
            });
            const fail = (res => {
                this.loading.status = false;
                this.$message.error(res.msg);
            })
            const params = {
                quality_index
            }

            this.$ajax.put('api/quality/quality_index', params, {func: {success: success, fail: fail}})
        },
        /**
         * 确认是否删除指标
         * @param {Number} flag 一级数组标识
         * @param {Number} inx1 一级数组下标
         * @param {Number} inx2 二级数组下标
         */
        deleteConfirm(flag, inx1, inx2) {
            let title = flag === 'first' ? '是否删除该一级指标' : '是否删除该二级指标';

            let yes = (res => {
                if (flag === 'first') {
                    this.deleteFirstIndex(inx1);
                } else {
                    this.deleteSecondIndex(inx1, inx2);
                }
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: title});
        },
        /**
         * 删除一级指标
         * @param {Number} inx 一级数组下标
         */
        deleteFirstIndex(inx) {
            this.loading.status = true;
            let quality_index = [];
            let _temp = [];

            _temp = this.listData.filter((item, index) => {
                return index !== inx;
            })

            _temp.forEach(item => {
                let _children = [];

                item.children.forEach(item2 => {
                    _children.push({
                        title: item2.title,
                        content: item2.content
                    })
                })

                quality_index.push({
                    title: item.title,
                    children: _children
                })
            })

            let success = (res => {
                this.loading.status = false;
                this.$message.success(res.msg);

                this.getList();
            });
            const fail = (res => {
                this.loading.status = false;
                this.$message.error(res.msg);
            })
            const params = {
                quality_index
            }

            this.$ajax.put('api/quality/quality_index', params, {func: {success: success, fail: fail}})
        },
        /**
         * 删除二级指标
         * @param {Number} inx1 一级数组下标
         * @param {Number} inx2 二级数组下标
         */
        deleteSecondIndex(inx1, inx2) {
            this.loading.status = true;
            let quality_index = [];

            this.listData.forEach((item, index) => {
                let _children = [];
                let _temp = item.children;

                if (index === inx1) {
                    _temp = item.children.filter((item2, index2) => {
                        return index2 !== inx2;
                    })
                }

                _temp.forEach(item2 => {
                    _children.push({
                        title: item2.title,
                        content: item2.content
                    })
                })

                quality_index.push({
                    title: item.title,
                    children: _children
                })
            })

            let success = (res => {
                this.loading.status = false;
                this.$message.success(res.msg);
                
                this.getList();
            });
            const fail = (res => {
                this.loading.status = false;
                this.$message.error(res.msg);
            })
            const params = {
                quality_index
            }

            this.$ajax.put('api/quality/quality_index', params, {func: {success: success, fail: fail}})
        },
    },
}
</script>

<style lang="scss">
.zh-quality-indicator {
    .quality-banner {
        display: flex;
        align-items: center;
        height: 36px;
        font-size: 14px;
        color: #000;
        text-align: center;
        background: #F2F2F2;
        border: 1px solid #F2F2F2;

        >div:first-child {
            width: 176px;
        }

        >div:nth-child(2) {
            width: 240px;
        }

        >div:nth-child(3) {
            flex: 1;
            text-align: left;
        }
    }

    .quality-wrapper {
        .first-title {
            display: flex;
            justify-content: space-between;
            height: 36px;
            line-height: 36px;
            border-bottom: 1px solid #DDDDDD;
            box-sizing: border-box;

            >span:first-child {
                width: 176px;
                text-align: center;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }

        .second-title {
            display: flex;
            margin-left: 176px;
            height: 36px;
            line-height: 36px;
            border-bottom: 1px solid #DDDDDD;
            box-sizing: border-box;

            >span {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            >span:first-child {
                width: 240px;
                text-align: center;
            }

            >span:nth-child(2) {
                flex: 1;
                padding-right: 20px;
            }
        }

        .operate-btn {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            width: 120px;

            i {
                font-size: 18px;
                color: #348EFC;
                cursor: pointer;
            }

            img {
                cursor: pointer;
            }
            
            i:last-child {
                color: #F56C6C;
            }
        }

        .add-first-title {
            padding-left: 78px;
            height: 36px;
            line-height: 36px;
            border-bottom: 1px solid #DDD;

            i {
                font-size: 18px;
                color: #348EFC;
                cursor: pointer;
            }
        }

        .total-score {
            padding: 30px 16px;
            text-align: right;

            span {
                font-size: 20px;
                color: #D99068;
            }
        }

        .operate-hidden {
            visibility: hidden;
        }
    }
}
</style>